<template>
  <div class="signin border-card">
    <p>欢迎登录</p>
    <n-form ref="formRef" :model="model" label-width="100px">
      <n-form-item path="age" label="用户名">
        <n-input
            size="large"
            placeholder="请输入用户名"
            v-model:value="model.username"
            @keydown.enter.prevent
        />
      </n-form-item>
      <n-form-item path="password" label="密码">
        <n-input
            size="large"
            placeholder="请输入密码"
            v-model:value="model.password"
            type="password"
        />
      </n-form-item>
      <n-row :gutter="[0, 24]">
        <n-col :span="24">
          <div style="display: flex; justify-content: flex-end">
            <n-button
                :loading="loging"
                @click="handleLogin"
                :disabled="model.username === null"
                round
                type="primary"
            >
              验证
            </n-button>
          </div>
        </n-col>
      </n-row>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import {NInput, NForm, NFormItem, NButton, NRow, NCol} from "naive-ui";
import {useMessage} from 'naive-ui'
import {ref} from "vue"
import userStore from "~/store/user";
import {ISigningParams} from "~/api/user/types";

const loging = ref(false)
const message = useMessage()
const userSte = userStore();
const model = ref<ISigningParams>({
  username: "codehope2",
  password: "c1c2c3c456",
});
// emit 事件
const emit = defineEmits(['ok'])
const handleLogin = () => {
  loging.value = false
  userSte.handleLogin(model.value).then(() => {
    message.info("登录成功！")
    emit("ok")
    userSte.handleGetUserProfile()
  }).catch(() => {
    message.warning("登录失败！")
  }).finally(() => {
    loging.value = true
  })
};

</script>

<style scoped lang="scss">
.signin {
  text-align: center;
  padding: 30px;
  background: #ffffff;
}
</style>
